
$(function () {

    time();
    DataOverview();
    char1();
    char2();
    char3();
    char4();
    char5();
    char6();
    char7();

})

function time() {
    var vWeek, vWeek_s, vDay;
    vWeek = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    var date = new Date();
    vWeek_s = date.getDay();
    // 获取当前日期和时间的各个部分
    var year = date.getFullYear().toString(); // 年份
    var month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份
    var day = date.getDate().toString().padStart(2, '0'); // 日
    var hours = date.getHours().toString().padStart(2, '0'); // 小时
    var minutes = date.getMinutes().toString().padStart(2, '0'); // 分钟
    var seconds = date.getSeconds().toString().padStart(2, '0'); // 秒钟

    // 将日期和时间显示在页面上
    document.getElementById("time").innerHTML = "当前时间  " + year + "年" + month + "月" + day + "日" + "\t" + hours + ":" + minutes + ":" + seconds + "\t" + vWeek[vWeek_s];

};
setInterval("time()", 1000);

var url = 'http://8.138.133.80:5000'
// var url = 'http://127.0.0.1:5000'

function DataOverview() {
    $.get(url + '/getDataOverview').done(function (data1) {
        var pTags = document.querySelectorAll('.con_div_text01 div.text01_div p');
        data1 = data1['data'];
        pTags[0].textContent = '公共汽电车运营数(辆)';
        pTags[1].textContent = data1[0];

        pTags[2].textContent = '轨道交通配属车辆数(辆)';
        pTags[3].textContent = data1[1];

        pTags[4].textContent = '公共汽电车运营线里程(km)';
        pTags[5].textContent = data1[2];
        pTags[5].classList.add('sky'); // Adding a class to change color

        pTags[6].textContent = '轨道交通运营里程(km)';
        pTags[7].textContent = data1[3];
        pTags[7].classList.add('sky'); // Adding a class to change color

        pTags[8].textContent = '公共汽电车客运量(万人次)';
        pTags[9].textContent = data1[4];
        pTags[9].classList.add('org'); // Adding a class to change color

        pTags[10].textContent = '轨道交通客运量(万人次)';
        pTags[11].textContent = data1[5];
        pTags[11].classList.add('org'); // Adding a class to change color

    });
}

function char7() {

    $.get(url + '/getMap').done(function (data1) {

        var myChart = echarts.init($("#map_div")[0]);

        var geoCoordMap = {
            广州市: [113.507649675, 23.3200491021],
            东莞市: [113.863433991, 22.9430238154],
            中山市: [113.422060021, 22.5451775145],
            云浮市: [111.750945959, 22.9379756855],
            佛山市: [113.034025635, 23.0350948405],
            惠州市: [114.41065808, 23.1135398524],
            揭阳市: [116.079500855, 23.3479994669],
            梅州市: [116.126403098, 24.304570606],
            汕头市: [116.588650288, 23.2839084533],
            汕尾市: [115.572924289, 22.9787305002],
            江门市: [112.678125341, 22.2751167835],
            河源市: [114.913721476, 23.9572508505],
            深圳市: [114.025973657, 22.5960535462],
            清远市: [113.040773349, 23.9984685504],
            湛江市: [110.165067263, 21.2574631038],
            潮州市: [116.830075991, 23.7618116765],
            珠海市: [113.262447026, 22.1369146461],
            肇庆市: [112.37965337, 23.5786632829],
            茂名市: [110.931245331, 21.9682257188],
            阳江市: [111.777009756, 21.9715173045],
            韶关市: [113.594461107, 24.8029603119]
        }

        var customerBatteryCityData = data1['data'];

        var option = {
            tooltip: {
                trigger: 'item',
                show: true,
                enterable: true,
                textStyle: {
                    fontSize: 20,
                    color: '#fff'
                },
                // backgroundColor: 'rgba(0,2,89,0.8)',
                formatter: '{b}<br />{c}万人'
            },

            geo: [
                {
                    map: '广东',
                    aspectScale: 0.9,
                    roam: false, // 是否允许缩放
                    zoom: 1.2, // 默认显示级别
                    layoutSize: '95%',
                    layoutCenter: ['55%', '50%'],
                    itemStyle: {
                        normal: {
                            areaColor: {
                                type: 'linear-gradient',
                                x: 0,
                                y: 400,
                                x2: 0,
                                y2: 0,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(37,108,190,0.3)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(15,169,195,0.3)' // 50% 处的颜色
                                }],
                                global: true // 缺省为 false
                            },
                            borderColor: '#4ecee6',
                            borderWidth: 1
                        },
                        emphasis: {
                            areaColor: {
                                type: 'linear-gradient',
                                x: 0,
                                y: 300,
                                x2: 0,
                                y2: 0,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(37,108,190,1)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(15,169,195,1)' // 50% 处的颜色
                                }],
                                global: true // 缺省为 false
                            }
                        }
                    },
                    emphasis: {
                        itemStyle: {
                            areaColor: '#0160AD'
                        },
                        label: {
                            show: 0,
                            color: '#fff'
                        }
                    },
                    zlevel: 3
                },
                {
                    map: '广东',
                    aspectScale: 0.9,
                    roam: false, // 是否允许缩放
                    zoom: 1.2, // 默认显示级别
                    layoutSize: '95%',
                    layoutCenter: ['55%', '50%'],
                    itemStyle: {
                        normal: {
                            borderColor: 'rgba(192,245,249,.6)',
                            borderWidth: 2,
                            shadowColor: '#2C99F6',
                            shadowOffsetY: 0,
                            shadowBlur: 120,
                            areaColor: 'rgba(29,85,139,.2)'
                        }
                    },
                    zlevel: 2,
                    silent: true
                },
                {
                    map: '广东',
                    aspectScale: 0.9,
                    roam: false, // 是否允许缩放
                    zoom: 1.2, // 默认显示级别
                    layoutSize: '95%',
                    layoutCenter: ['55%', '51.5%'],
                    itemStyle: {
                        // areaColor: '#005DDC',
                        areaColor: 'rgba(0,27,95,0.4)',
                        borderColor: '#004db5',
                        borderWidth: 1
                    },
                    zlevel: 1,
                    silent: true
                }
            ],
            series: [
                {
                    name: 'AQI',
                    type: 'map',
                    map: '广东',
                    geoIndex: 0,
                    showLegendSymbol: true,
                    roam: true,
                    label: {
                        normal: {
                            show: false,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },

                    itemStyle: {
                        normal: {
                            borderColor: '#2ab8ff',
                            borderWidth: 1.5,
                            areaColor: '#12235c'
                        },
                        emphasis: {
                            areaColor: '#2AB8FF',
                            borderWidth: 0,
                            color: 'red'
                        }
                    },
                    data: customerBatteryCityData
                },
                // 柱状体的主干
                {
                    type: 'lines',
                    zlevel: 5,
                    effect: {
                        show: false,
                        // period: 4, //箭头指向速度，值越小速度越快
                        // trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                        // symbol: 'arrow', //箭头图标
                        // symbol: imgDatUrl,
                        symbolSize: 5 // 图标大小
                    },
                    lineStyle: {
                        width: 20, // 尾迹线条宽度
                        color: 'rgb(22,255,255, .6)',
                        opacity: 1, // 尾迹线条透明度
                        curveness: 0 // 尾迹线条曲直度
                    },
                    label: {
                        show: 0,
                        position: 'end',
                        formatter: '245'
                    },
                    silent: true,
                    data: lineData()
                },
                // 柱状体的顶部
                {
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    geoIndex: 0,
                    zlevel: 5,
                    symbol: 'circle',
                    symbolSize: [20, 10],
                    itemStyle: {
                        color: 'rgb(22,255,255, 1)',
                        opacity: 1
                    },
                    silent: true,
                    data: scatterData()
                },
                // 柱状体的底部
                {
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    geoIndex: 0,
                    zlevel: 4,
                    label: {
                        // 这儿是处理的
                        formatter: '{b}',
                        position: 'bottom',
                        color: '#fff',
                        fontSize: 12,
                        distance: 10,
                        show: true
                    },
                    symbol: 'circle',
                    symbolSize: [20, 10],
                    itemStyle: {
                        // color: '#F7AF21',
                        color: 'rgb(22,255,255, 1)',
                        opacity: 1
                    },
                    silent: true,
                    data: scatterData2()
                },
                // 底部外框
                {
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    geoIndex: 0,
                    zlevel: 4,
                    label: {
                        show: false
                    },
                    symbol: 'circle',
                    symbolSize: [40, 20],
                    itemStyle: {
                        color: {
                            type: 'radial',
                            x: 0.5,
                            y: 0.5,
                            r: 0.5,
                            colorStops: [
                                {
                                    offset: 0, color: 'rgb(22,255,255, 0)' // 0% 处的颜色
                                },
                                {
                                    offset: .75, color: 'rgb(22,255,255, 0)' // 100% 处的颜色
                                },
                                {
                                    offset: .751, color: 'rgb(22,255,255, 1)' // 100% 处的颜色
                                },
                                {
                                    offset: 1, color: 'rgb(22,255,255, 1)' // 100% 处的颜色
                                }
                            ],
                            global: false // 缺省为 false
                        },

                        opacity: 1
                    },
                    silent: true,
                    data: scatterData2()
                }
            ]
        };

        myChart.setOption(option);
        window.addEventListener('resize', function () { myChart.resize(); })


        // 动态计算柱形图的高度（定一个max）
        function lineMaxHeight() {
            const maxValue = Math.max(...customerBatteryCityData.map(item => item.value))
            return 0.9 / maxValue
        }
        // 柱状体的主干
        function lineData() {
            return customerBatteryCityData.map((item) => {
                return {
                    coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * lineMaxHeight()]]
                }
            })
        }
        // 柱状体的顶部
        function scatterData() {
            return customerBatteryCityData.map((item) => {
                return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * lineMaxHeight()]
            })
        }
        // 柱状体的底部
        function scatterData2() {
            return customerBatteryCityData.map((item) => {
                return {
                    name: item.name,
                    value: geoCoordMap[item.name]
                }
            })
        }

    });
}


//统计分析图
function char1() {
    $.get(url + '/genderRatioOfPopulation').done(function (data1) {
        var myChart = echarts.init($("#char1")[0]);

        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [{
                name: '比例',
                type: 'pie',
                radius: '68%',
                center: ['50%', '50%'],
                clockwise: false,
                data: data1['data'],
                label: {
                    normal: {
                        textStyle: {
                            color: '#999',
                            fontSize: 14,
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        borderWidth: 4,
                        borderColor: '#ffffff',
                    },
                    emphasis: {
                        borderWidth: 0,
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }],
            color: [
                '#00acee',
                '#52cdd5',
                '#79d9f1',
                '#a7e7ff',
                '#c8efff'
            ],
        };

        myChart.setOption(option);
        window.addEventListener('resize', function () { myChart.resize(); })

    });
}

function char6() {
    $.get(url + '/averageHousePrice').done(function (data1) {
        var myChart = echarts.init($("#char6")[0]);

        var option = {
            color: ['#1da1f2', '#fa7070', '#fcbb07', '#90dd75', '#8fa6ec', '#157efb'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                }
            },
            legend: {
                itemWidth: 6, //图例的宽度
                itemHeight: 6, //图例的高度
                itemGap: 8,
                center: 'center',
                top: 'top',
                icon: 'rect',
                textStyle: {
                    color: '#fff',
                    fontSize: 12
                },
                data: data1['name'],
            },
            grid: {
                left: '4%',
                right: '2%',
                bottom: '15%',
                containLabel: true
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
            },
            calculable: true,
            xAxis: [{
                name: '年',
                splitLine: {
                    show: false
                }, //去除网格线
                splitArea: {
                    show: false
                }, //保留网格区域
                axisLine: {
                    show: true,
                    lineStyle: { //轴上的线样式
                        color: '#979797',
                        width: 0.4, //这里是为了突出显示加上的
                    },

                },

                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                    }
                },
                data: data1['year'],
            }],
            yAxis: [{
                name: '元/平方米',
                splitLine: {
                    show: false
                }, //去除网格线
                splitArea: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#979797',
                        width: 0.4,
                    },

                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                    }
                },
                axisTick: {
                    show: false
                },

            }],
            series: data1['price'],

        }

        myChart.setOption(option);
        window.addEventListener('resize', function () { myChart.resize(); })
    });
}

function char2() {
    $.get(url + '/getGDP').done(function (data1) {
        var myChart = echarts.init($("#char2")[0]);

        var colorArray = [
            {
                top: '#ffa800', //黄
                bottom: 'rgba(11,42,84,.3)'
            }, {
                top: '#1ace4a', //绿
                bottom: 'rgba(11,42,84, 0.3)'
            },
            {
                top: '#4bf3ff', //蓝
                bottom: 'rgba(11,42,84,.3)'
            }, {
                top: '#4f9aff', //深蓝
                bottom: 'rgba(11,42,84,.3)'
            },
            {
                top: '#b250ff', //粉
                bottom: 'rgba(11,42,84,.3)'
            }
        ];
        option = {
            tooltip: {
                show: true,
                formatter: "{b}年 : {c}亿元"
            },
            grid: {
                left: '5%',
                top: '5%',
                right: '10%',
                bottom: '8%',
                containLabel: true
            },

            xAxis: {
                type: 'value',
                show: false,
                position: 'top',
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#fff',
                    }
                },
                splitLine: {
                    show: false
                },
            },
            yAxis: [{
                type: 'category',
                axisTick: {
                    show: false,
                    alignWithLabel: false,
                    length: 5,

                },
                "splitLine": { //网格线
                    "show": false
                },
                inverse: 'true', //排序
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#fff',
                    }
                },
                data: data1['years']
            }

            ],
            series: [{
                name: '能耗值',
                type: 'bar',
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        formatter: '{c}',
                        textStyle: {
                            color: 'white' //color of value
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        show: true,
                        color: function (params) {
                            let num = colorArray.length;
                            return {
                                type: 'linear',
                                colorStops: [{
                                    offset: 0,
                                    color: colorArray[params.dataIndex % num].bottom
                                }, {
                                    offset: 1,
                                    color: colorArray[params.dataIndex % num].top
                                }, {
                                    offset: 0,
                                    color: colorArray[params.dataIndex % num].bottom
                                }, {
                                    offset: 1,
                                    color: colorArray[params.dataIndex % num].top
                                }, {
                                    offset: 0,
                                    color: colorArray[params.dataIndex % num].bottom
                                }, {
                                    offset: 1,
                                    color: colorArray[params.dataIndex % num].top
                                }, {
                                    offset: 0,
                                    color: colorArray[params.dataIndex % num].bottom
                                }, {
                                    offset: 1,
                                    color: colorArray[params.dataIndex % num].top
                                }, {
                                    offset: 0,
                                    color: colorArray[params.dataIndex % num].bottom
                                }, {
                                    offset: 1,
                                    color: colorArray[params.dataIndex % num].top
                                }, {
                                    offset: 0,
                                    color: colorArray[params.dataIndex % num].bottom
                                }, {
                                    offset: 1,
                                    color: colorArray[params.dataIndex % num].top
                                }],
                                //globalCoord: false
                            }
                        },
                        barBorderRadius: 70,
                        borderWidth: 0,
                        borderColor: '#333',
                    }
                },
                barGap: '0%',
                barCategoryGap: '50%',
                data: data1['numbers']
            }]
        };

        myChart.setOption(option);
        window.addEventListener('resize', function () { myChart.resize(); })
    });
}

function char3() {
    $.get(url + '/getCityAQI').done(function (data1) {
        var myChart = echarts.init($("#char3")[0]);

        var option = {
            color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
            grid: {
                left: '10%',
                top: '5%',
                bottom: '10%',
                right: '3%',
                containLabel: true
            },
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c}%"
            },
            legend: {
                type: "scroll",
                // orient: "vartical",
                top: "top",
                itemWidth: 8,
                itemHeight: 8,
                itemGap: 10,
                textStyle: {
                    color: '#A3E2F4',
                    fontSize: 10,
                    fontWeight: 0
                },
                data: data1['city']
            },
            polar: {},
            angleAxis: {
                interval: 1,
                type: 'category',
                data: [],
                z: 10,
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#0B4A6B",
                        width: 1,
                        type: "solid"
                    },
                },
                axisLabel: {
                    interval: 0,
                    show: true,
                    color: "#0B4A6B",
                    margin: 6,
                    fontSize: 12
                },
            },
            radiusAxis: {
                min: 20,
                max: 50,
                interval: 20,
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#0B3E5E",
                        width: 1,
                        type: "solid"
                    },
                },
                axisLabel: {
                    formatter: '{value} %',
                    show: false,
                    padding: [0, 0, 20, 0],
                    color: "#0B3E5E",
                    fontSize: 16
                },
                splitLine: {
                    lineStyle: {
                        color: "#0B3E5E",
                        width: 2,
                        type: "solid"
                    }
                }
            },
            calculable: true,
            series: [{
                stack: 'a',
                type: 'pie',
                radius: ['20%', '50%'],
                roseType: 'area',
                zlevel: 10,
                label: {
                    normal: {
                        show: true,
                        formatter: "{c}",
                        textStyle: {
                            fontSize: 12,
                        },
                        position: 'outside'
                    },
                    emphasis: {
                        show: true
                    }
                },
                labelLine: {
                    normal: {
                        show: true,
                        length: 20,
                        length2: 55
                    },
                    emphasis: {
                        show: false
                    }
                },
                data: data1['number']
            },]
        }

        myChart.setOption(option);
        window.addEventListener('resize', function () { myChart.resize(); })
    });
}

function char4() {
    $.get(url + '/perCapitaConsumptionExpenditure').done(function (data1) {
        var myChart = echarts.init($("#char4")[0]);

        var option = {
            grid: {
                top: '13%',
                bottom: '15%',
                left: '16%',
                right: '4%'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                    }
                },
                boundaryGap: true, //默认，坐标轴留白策略
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false,
                    alignWithLabel: true
                },
                data: data1['city']
            },
            yAxis: {
                name: '元',
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: 'rgba(247, 248, 249, 0.2)'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                    }
                },

            },
            series: [{
                type: 'line',
                symbol: 'circle',
                symbolSize: 7,
                lineStyle: {
                    color: 'rgb(33,148,246)',
                    shadowBlur: 12,
                    shadowColor: 'rgb(33,148,246,0.9)',
                    shadowOffsetX: 1,
                    shadowOffsetY: 1
                },
                itemStyle: {
                    color: 'rgb(245, 246, 248)',
                    borderWidth: 1,
                    borderColor: '#FFF'
                },
                label: {
                    show: false,
                    distance: 1,
                    emphasis: {
                        show: true,
                        offset: [25, -2],
                        padding: [8, 8, 8, 6],
                        //width:60,
                        height: 36,
                        formatter: function (params) {
                            var name = params.name;
                            var value = params.data;
                            var str = name + '\n消费支出：' + value + ' 元';
                            return str;
                        },
                    }
                },
                data: data1['number']
            }]
        };

        myChart.setOption(option);
        window.addEventListener('resize', function () { myChart.resize(); })
    });
}

function char5() {
    $.get(url + '/getPermanentPopulation').done(function (data1) {
        var myChart = echarts.init($("#char5")[0]);

        const data = data1['numbers']
        const sideData = data.map(item => item)

        var option = {
            tooltip: {
                trigger: 'axis',
                formatter: "{b}年 : {c}万人",
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },

            grid: {
                top: '5%',
                right: '3%',
                left: '10%',
                bottom: '23%'
            },
            xAxis: {
                data: data1['years'],
                //坐标轴
                axisLine: {
                    lineStyle: {
                        color: '#3eb2e8'
                    }
                },
                //坐标值标注
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                    }
                }
            },
            yAxis: {
                //坐标轴
                axisLine: {
                    show: false
                },
                //坐标值标注
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                    }
                },
                //分格线
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#4784e8'
                    }
                }
            },
            series: [{
                name: 'a',
                tooltip: {
                    show: false
                },
                type: 'bar',
                barWidth: 24.5,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: "#0B4EC3" // 0% 处的颜色
                        }, {
                            offset: 0.6,
                            color: "#138CEB" // 60% 处的颜色
                        }, {
                            offset: 1,
                            color: "#17AAFE" // 100% 处的颜色
                        }], false)
                    }
                },
                data: data,
                barGap: 0
            }, {
                type: 'bar',
                barWidth: 8,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: "#09337C" // 0% 处的颜色
                        }, {
                            offset: 0.6,
                            color: "#0761C0" // 60% 处的颜色
                        }, {
                            offset: 1,
                            color: "#0575DE" // 100% 处的颜色
                        }], false)
                    }
                },
                barGap: 0,
                data: sideData
            }, {
                name: 'b',
                tooltip: {
                    show: false
                },
                type: 'pictorialBar',
                itemStyle: {
                    borderWidth: 1,
                    borderColor: '#0571D5',
                    color: '#1779E0'
                },
                symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
                symbolSize: ['30', '12'],
                symbolOffset: ['0', '-11'],
                //symbolRotate: -5,
                symbolPosition: 'end',
                data: data1['numbers'],
                z: 3
            }]
        };

        myChart.setOption(option);
        window.addEventListener('resize', function () { myChart.resize(); })
    });
}
